<!DOCTYPE html>
<html lang="en">
<head>

    <meta charset="UTF-8">
    <title>{{ title }}</title>

    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
    <script src=" https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/echarts/5.1.2/echarts.min.js"></script>
    <!--    页面样式-->
    <style type="text/css">
        /* 标题样式 */
        .main {
            background: #1E1E1E; /* 深灰色背景颜色 */
            background-size: 100%;
            -webkit-background-size: 100%;
            width: 100%;
            height: 100%;
        }

        .title {
            width: auto;
            height: 50px;
            text-align: center;
            font: bolder 25px/50px "Microsoft YaHei UI";
            color: #61AFEF; /* 蓝色文字颜色 */
            background: #1E1E1E; /* 深灰色背景颜色 */
            border-bottom: solid 1px #3E4451; /* 深灰色边框颜色 */
            margin-bottom: 5px;
        }

        .content-box {
            height: 410px;
            width: 100%;
            display: flex;
            margin-bottom: 5px;
        }

        .box1, .box2, .box3 {
            flex: 1px;
            margin: 0 5px;
        }

        .box3 > .panel {
            background: #282C34;
            border: 1px solid rgba(25, 186, 139, 0.17);
            width: 100%;
            height: 410px;
        }


        .panel {
            position: relative;
            border: 1px solid rgba(25, 186, 139, 0.17);
            background: #282C34; /* 深蓝灰色背景颜色 */
            padding: 0 5px 10px;
            margin-bottom: 5px;
        }

        .panel h2,
        .test_info h2 {
            height: 30px;
            line-height: 35px;
            text-align: center;
            color: #61AFEF; /* 蓝色标题颜色 */
            font-size: 20px;
            font-weight: bold;
            margin: 5px;
        }

        .panel .chart, .panel .chart2, .panel .chart3, .panel .desc {
            height: 150px;
        }

        .info {
            font: normal 5px/10px "Microsoft YaHei UI Light";
            color: #D4D4D4; /* 浅灰色文字颜色 */
            display: flex;
        }

        .info div {
            padding: 8px;
            border: solid 1px #3E4451; /* 深灰色边框颜色 */
        }


        .info div span {
            margin-left: 5px;
        }

        /* 执行信息样式   */
        .test_info {
            width: 100%;
            /*padding: 1;*/
            background: #282C34; /* 深蓝灰色背景颜色 */
        }

        .table td,
        .table th {
            border: solid 1px #3E4451 !important; /* 深灰色边框颜色 */
            padding: 0 !important;
            line-height: 30px;
            text-align: center;
            height: 15px;
            color: #b7b5b5; /* 浅灰色文字颜色 */
        }

        select {
            border: 0;
            padding: 0;
            margin: 0;
            height: 1.5em;
            width: 6em;
            margin-left: 0.5em;
        }

        option {
            text-align: center;
            height: 15px;
            font: none 10px/20px "Microsoft YaHei UI";
            color: #05f619; /* 明亮绿色 */
        }

        .test_log {
            background: rgba(45, 25, 18, 0.15); /* 黑色背景颜色 */
            width: 100%;
            height: 30px;
            border-top: none;
            border-bottom: none;
            display: none;
            text-align: left;
            margin: 10px 15px;
            padding: 10px 15px;
        }

        .test_log td {
            text-align: left;
            height: 15px;
            margin: 0;
            padding-left: 3em;
            padding-right: 3em;
            font: none 18px/24px "Microsoft YaHei UI";
        }

        pre {
            margin: 10px 25px;
            white-space: pre-wrap;
            white-space: -moz-pre-wrap;
            white-space: -o-pre-wrap;
            word-wrap: break-word;
            color: rgba(7, 176, 80, 0.98); /* 绿色文字颜色 */
            line-height: 18px;
            font-size: 12px;
        }

        .chart4 {
            overflow: auto;
            width: 100%;
            height: 350px;
        }

        .chart4::-webkit-scrollbar {
            width: 2px;
        }

        .chart4::-webkit-scrollbar-thumb {
            /* 滚动条里面小方块 */
            border-radius: 2px;
            -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.62); /* 深灰色背景颜色 */
            background: #1E1E1E; /* 深灰色背景颜色 */
            height: 5px;
        }

        .chart4::-webkit-scrollbar-track {
            /* 滚动条里面轨道 */
            -webkit-box-shadow: inset 0 0 5px #3E4451; /* 深灰色边框颜色 */
            border-radius: 5px;
            background: #1E1E1E; /* 深灰色背景颜色 */
        }

        /* 详细内容描述的小标题 */
    .table_data {
            text-align: center;
            background: #282C34; /* 蓝色背景颜色 */
            font: bold 14px/28px 'Microsoft YaHei UI';
            color: #D4D4D4; /* 浅灰色文字颜色 */
            border-radius: 5px;
        }
    button,.btn-sm{
    font-size:0.5rem;
        border-radius:0.5rem
    }
    </style>

</head>
<body>
<div class="main">
    <div class="title"
         style="color: #61AFEF; background: #1E1E1E; border-bottom: solid 1px #3E4451; margin-bottom: 10px;">
        {{ title }}
    </div>
    <div class="content-box">
        <div class="box1">
            <div class="panel" style="background: #282C34; border: 1px solid rgba(25, 186, 139, 0.17);">
                <h2 style="color: #61AFEF;">执行结果</h2>
                <div class="chart" id="char3"></div>
                <div class="panel-footer"></div>
            </div>
            <div class="panel" style="background: #282C34; border: 1px solid rgba(25, 186, 139, 0.17);">
                <h2 style="color: #61AFEF;">成功占比</h2>
                <div class="chart" id="char1"></div>
                <div class="panel-footer"></div>
            </div>
        </div>
        <div class="box2">
            <div class="panel" style="background: #282C34; border: 1px solid rgba(25, 186, 139, 0.17);">
                <h2 style="color: #61AFEF;">运行信息</h2>
                <div class="desc">
                    <div class="info">
                        <div style="flex: 5">
                            <button type="button" class="btn btn-primary btn-sm">开始时间</button>
                            <span>{{ begin_time }}</span>
                        </div>
                        <div style="flex: 5">
                            <button type="button" class="btn btn-primary btn-sm">用例总数</button>
                            <span>{{ all }}</span>
                        </div>
                    </div>
                    <div class="info">
                        <div style="flex: 5">
                            <button type="button" class="btn btn-primary btn-sm">运行时长</button>
                            <span>{{ runtime }}</span>
                        </div>
                        <div style="flex: 5">
                            <button type="button" class="btn btn-primary btn-sm ">测试人员</button>
                            <span>{{ tester }}</span>
                        </div>
                    </div>
                    <div class="info">
                        <div style="flex: 5">
                            <button type="button" class="btn btn-primary btn-sm">成功用例</button>
                            <span>{{ success }}</span>
                        </div>
                        <div style="flex: 5">
                            <button type="button" class="btn btn-primary btn-sm ">成功占比</button>
                            <span>{{ pass_rate }}%</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel" style="background: #282C34; border: 1px solid rgba(25, 186, 139, 0.17);">
                <h2 style="color: #61AFEF;">通过率趋势</h2>
                <div class="chart2" id="char2"></div>
            </div>
        </div>
        <div class="box3">
            <div class="panel" style="background: #282C34; border: 1px solid rgba(25, 186, 139, 0.17);">
                <h2 style="color: #61AFEF;">历史构建结果</h2>
                <div class="chart4">
                    <table class="table" style="color: #d6d6d6;padding: 0">
                        <thead>
                        <tr>
                            <th scope="col">执行时间</th>
                            <th scope="col">用例总数</th>
                            <th scope="col">成功数量</th>
                            <th scope="col">成功占比</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for hos in history[::-1] %}
                        <tr>
                            <th scope="row">{{ hos.begin_time }}</th>
                            <td>{{ hos.all }}</td>
                            <td>{{ hos.success }}</td>
                            <td>{{ hos.pass_rate }}%</td>
                        </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="test_info" style="background: #282C34;">
        <h2 style="color: #61AFEF;">本次运行详情</h2>
        <div class="table_data">
            <table class="table" style="color: #FFFFFF">
                <thead class="text-light" style="background: rgba(3, 14, 70, 0.5)">
                <tr>
                    <th scope="col" style="width: 5%;padding: 0">编号</th>
                    <th scope="col" style="width: 20%;padding: 0">
                        <span>测试类</span>
                        <select id="testClass">
                            <option>所有</option>
                            {% for foo in testClass %}
                            <option>{{ foo }}</option>
                            {% endfor %}
                        </select>
                    </th>
                    <th scope="col" style="width: 15%;padding: 0">测试模块</th>
                    <th scope="col" style="width: 20%;padding: 0">用例描述</th>
                    <th scope="col" style="width: 15%;padding: 0">执行时间</th>
                    <th scope="col" style="width: 20%;padding: 0">
                        <span>执行结果</span>
                        <select id="testResult">
                            <option>所有</option>
                            <option class="text-success">成功</option>
                            <option class="text-danger">失败</option>
                            <option class="text-warning">错误</option>
                            <option class="text-info">跳过</option>
                        </select>
                    </th>
                    <th scope="col" style="width: 10%;padding: 0">详细信息</th>
                </tr>
                </thead>
                <tbody>
                {% for foo in results %}
                <tr class="case_">
                    <td>{{ loop.index }}</td>
                    <td class="{{ foo.class_name }}">{{ foo.class_name }}</td>
                    <td>{{ foo.method_name }}</td>
                    <td>{{ foo.method_doc }}</td>
                    <td>{{ foo.run_time }}</td>
                    {% if foo.state == '成功' %}
                    <td class="text-success">{{ foo.state }}</td>
                    {% elif foo.state == '失败' %}
                    <td class="text-warning">{{ foo.state }}</td>
                    {% elif foo.state == '错误' %}
                    <td class="text-danger">{{ foo.state }}</td>
                    {% else %}
                    <td class="text-info">{{ foo.state }}</td>
                    {% endif %}
                    <td>
                        <button type="button" class="btn btn_info btn-primary btn-sm">详情</button>
                    </td>
                </tr>
                <tr class="test_log">
                    <td colspan="7" class="small text-muted" style=" word-wrap:break-word; word-break:break-all">
                        {% for item in foo.run_info %}
                        <pre>{{ item }}</pre>
                        {% endfor %}
                        {% if foo.run_info == [] %}
                        <pre>无内容输出！</pre>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
                </tbody>
            </table>
        </div>
        <div style="height: 400px"></div>
    </div>
</div>


<script type="text/javascript">
    const resulte = {
        "success": `{{success}}`,
        "all": `{{all}}`,
        "fail": `{{fail}}`,
        "skip": '{{skip}}',
        "error": `{{error}}`,
        "runtime": '{{runtime}}',
        "begin_time": "{{runtime}}",
        "pass_rate": '{{pass_rate}}',
    };
    const history = {{history}};
    var passRate = [];
    var dTime = [];
    history.forEach(function (item, index, array) {
        passRate.push(item.pass_rate);
        dTime.push(item.begin_time);
    });
    if (passRate.length === 1) {
        passRate.unshift(0);
        dTime.unshift(0);
    }

    function char01() {
        let myChart = echarts.init(document.getElementById('char1'));
        let option = {
            color: ['#009933', '#FF6666', '#CC0066', '#009999'],
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b}: {c} ({d}%)',
                backgroundColor: 'rgba(3, 14, 70, 0.5)',
                borderColor: '#333',
                textStyle: {
                    color: '#fff',
                    fontSize: '13',
                },
            },
            legend: {
                bottom: '0%',
                itemWidth: 10,
                itemHeight: 10,
                data: ['通过', '失败', '错误', '跳过'],
                textStyle: {
                    color: 'rgba(255, 255, 255, 0.5)',
                    fontSize: '12',
                },
            },
            series: [
                {
                    name: '测试结果',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center',
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '20',
                            fontWeight: 'bold',
                            color: '#fff',
                        },
                    },
                    labelLine: {
                        show: false,
                    },
                    data: [
                        {value: resulte.success, name: '通过'},
                        {value: resulte.fail, name: '失败'},
                        {value: resulte.error, name: '错误'},
                        {value: resulte.skip, name: '跳过'},
                    ],
                },
            ],
        };
        myChart.setOption(option);
    }

    char01();

    function char02() {
        let myChart = echarts.init(document.getElementById('char2'));
        option = {
            tooltip: {
                trigger: 'axis',
                formatter: '{a} <br/>{b}:  ({c}%)',
                backgroundColor: '#999999',
                borderColor: '#CC9999',
                textStyle: {
                    color: '#CC6600',
                    fontSize: '13',
                },
            },
            grid: {
                left: '10',
                top: '30',
                right: '10',
                bottom: '0',
                containLabel: true,
            },
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    show: false,
                    axisLabel: {
                        textStyle: {
                            color: '#CC6600',
                            fontSize: 12,
                        },
                    },
                    axisLine: {
                        lineStyle: {
                            color: '#CC6600',
                        },
                    },
                    data: dTime,
                },
                {
                    axisPointer: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                    position: 'bottom',
                    offset: 20,
                },
            ],
            yAxis: [
                {
                    type: 'value',
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)',
                        },
                    },
                    axisLabel: {
                        textStyle: {
                            color: 'rgba(255, 255, 255, 0.6)',
                            fontSize: 12,
                        },
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 255, 255, 0.1)',
                        },
                    },
                },
            ],
            series: [
                {
                    name: '成功占比',
                    type: 'line',
                    smooth: true,
                    symbol: 'circle',
                    symbolSize: 5,
                    showSymbol: true,
                    lineStyle: {
                        normal: {
                            color: '#0184d5',
                            width: 2,
                        },
                    },
                    areaStyle: {
                        normal: {
                            color: new echarts.graphic.LinearGradient(
                                0,
                                0,
                                0,
                                1,
                                [
                                    {
                                        offset: 0,
                                        color: 'rgba(1, 132, 213, 0.4)',
                                    },
                                    {
                                        offset: 0.8,
                                        color: 'rgba(1, 132, 213, 0.1)',
                                    },
                                ],
                                false
                            ),
                            shadowColor: 'rgba(0, 0, 0, 0.1)',
                        },
                    },
                    itemStyle: {
                        normal: {
                            color: '#0184d5',
                            borderColor: 'rgba(221, 220, 107, .1)',
                            borderWidth: 18,
                        },
                    },
                    data: passRate,
                },
            ],
        };
        myChart.setOption(option);
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    }

    char02();

    function char03() {
        let myChart = echarts.init(document.getElementById('char3'));
        var data = [resulte.success, resulte.fail, resulte.error, resulte.skip];
        var titlename = ['通过用例', '失败用例', '错误用例', '跳过用例'];
        var valdata = [resulte.all, resulte.all, resulte.all, resulte.all];
        var myColor = ['#009933', '#FF6666', '#CC0066', '#009999'];
        option = {
            grid: {
                top: '10%',
                left: '22%',
                bottom: '10%',
            },
            xAxis: {
                show: false,
            },
            yAxis: [
                {
                    show: true,
                    data: titlename,
                    inverse: true,
                    axisLine: {
                        show: false,
                    },
                    splitLine: {
                        show: false,
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLabel: {
                        color: '#fff',
                        rich: {
                            lg: {
                                backgroundColor: '#009933',
                                color: '#fff',
                                borderRadius: 15,
                                align: 'center',
                                width: 15,
                                height: 15,
                            },
                        },
                    },
                },
                {
                    show: false,
                    inverse: true,
                    data: valdata,
                    axisLabel: {
                        textStyle: {
                            fontSize: 12,
                            color: '#fff',
                        },
                    },
                    axisTick: {
                        show: false,
                    },
                    axisLine: {
                        show: false,
                    },
                },
            ],
            series: [
                {
                    type: 'bar',
                    yAxisIndex: 0,
                    data: data,
                    barCategoryGap: 50,
                    barWidth: 18,
                    itemStyle: {
                        normal: {
                            barBorderRadius: 20,
                            color: function (params) {
                                var num = myColor.length;
                                return myColor[params.dataIndex % num];
                            },
                        },
                    },
                    label: {
                        normal: {
                            show: true,
                            position: 'right',
                            formatter: '{c}条',
                            color: '#fff',
                        },
                    },
                },
                {
                    type: 'bar',
                    yAxisIndex: 1,
                    barCategoryGap: 50,
                    data: valdata,
                    barWidth: 20,
                    itemStyle: {
                        normal: {
                            color: 'none',
                            borderColor: '#FF6666',
                            borderWidth: 2,
                            barBorderRadius: 15,
                        },
                    },
                },
            ],
        };

        myChart.setOption(option);
        window.addEventListener('resize', function () {
            myChart.resize();
        });
    }

    char03();
</script>


<script>
    var tbodyTr = $('tbody .case_');
    var testResult = $("#testResult");
    var testClass = $("#testClass");
    <!--    用例执行详细信息显示切换-->
    $(".btn_info").click(function () {
        $(this).parent().parent().next().toggle();

    });
    // 当选择用例类之后触发
    testClass.change(function () {
        $('.test_log').hide();
        var cls = $(this).val();
        var res = testResult.val();
        elementDisplay(cls, res);
        sort()
    });
    testResult.change(function () {
        var res = $(this).val();
        var cls = testClass.val();
        elementDisplay(cls, res);
        sort()
    });

    function elementDisplay(cls, res) {
        // 用例数据的显示
        if (cls === "所有") {
            if (res === "所有") {
                tbodyTr.has('button').show();
            } else if (res === '成功') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.text-success').show()

            } else if (res === '错误') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.text-danger').show()

            } else if (res === '失败') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.text-warning').show()

            } else if (res === '跳过') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.text-info').show()
            }
        } else {
            if (res === "所有") {
                tbodyTr.hide();
                tbodyTr.has('button').has('.' + cls + '').show()
            } else if (res === '成功') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.' + cls + '').has('.text-success').show()
            } else if (res === '错误') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.' + cls + '').has('.text-danger').show()
            } else if (res === '失败') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.' + cls + '').has('.text-warning').show()
            } else if (res === '跳过') {
                tbodyTr.hide();
                tbodyTr.has('button').has('.' + cls + '').has('.text-info').show()
            }
        }
    }

    function sort() {
        //重新排列显示序号
        // 选择所有可以见的tr
        var visibleTr = tbodyTr.filter(":visible");

        visibleTr.each(function (index, element) {
            element.firstElementChild.innerHTML = index + 1;

        })

    }

    $('.nav-tabs li').click(function () {
        $(this).find('a').addClass('active');
        $(this).siblings().find('a').removeClass('active');
        $(this).parent().next().children('.tab-content div').eq($(this).index()).addClass('active show').siblings().removeClass('active show')
    });

</script>


</body>
</html>